<template>
	<el-form
		:model="toubaoForm"
		:rule="toubaoRules"
		label-width="130px"
		ref="toubaoForm"
	>
		<el-form-item label="企业名称" prop="customerName" required>
			<el-select
				v-model="toubaoForm.customerName"
				@change="getCustomerById"
				size="mini"
				filterable
				allow-create
				default-first-option
				class="field"
				placeholder="请选择企业"
			>
				<el-option
					v-for="customer in customerOptions"
					:value="customer.customerName"
					:label="customer.customerName"
				/>
			</el-select>
		</el-form-item>
		<el-form-item label="联系人" prop="contactName" required>
			<el-input
				v-model="toubaoForm.contactName"
				size="mini"
				placeholder="请输入联系人"
				class="field"
			/>
		</el-form-item>
		<el-form-item label="统一社会信用代码" prop="certNum" required>
			<el-input
				v-model="toubaoForm.certNum"
				placeholder="请输入统一社会信用代码"
				size="mini"
				class="field"
			/>
		</el-form-item>
		<el-form-item label="手机号码" prop="contactPhone" required>
			<el-input
				v-model="toubaoForm.contactPhone"
				placeholder="请输入手机号码"
				size="mini"
				class="field"
			/>
		</el-form-item>
		<!-- <el-form-item label="所在地区" prop="area">
					<el-input v-model="toubaoForm.area" size="mini" class="field" />
				</el-form-item> -->
		<el-form-item
			label="详细地址"
			prop="address"
			style="grid-column: -1/ 1"
			required
		>
			<el-input
				v-model="toubaoForm.address"
				placeholder="请输入详细地址"
				size="mini"
				class="field"
			/>
		</el-form-item>
		<el-form-item label="营业执照" prop="businessLlicense" required>
			<el-upload
				:class="{ 'hide-upload-button': businessLlicenseFile }"
				:before-remove="beforeRemove"
				:on-preview="() => onPreview(businessLlicenseFile.url)"
				:limit="0"
				:http-request="handleUpload"
				:file-list="[businessLlicenseFile]"
				list-type="picture-card"
			>
				<i class="el-icon-plus"></i>
			</el-upload>
		</el-form-item>
		<el-form-item label="示例">
			<el-image
				style="width: 148px; height: 148px"
				src="https://qtbx.meibaokeji.com.cn/employer/static/2022images/yyzz.png"
				:preview-src-list="[
					'https://qtbx.meibaokeji.com.cn/employer/static/2022images/yyzz.png'
				]"
			>
			</el-image>
		</el-form-item>
		<el-form-item
			v-if="toubaoForm.businessLlicense && toubaoForm.contactPhone"
			label="短信验证码"
			prop="code"
		>
			<el-input
				v-model="toubaoForm.code"
				placeholder="请输入短信验证码"
				size="mini"
				class="field"
			></el-input>
		</el-form-item>
		<div style="grid-column: -1/1; text-align: center">
			<el-button
				size="small"
				type="primary"
				@click="sendCode"
				v-if="
					toubaoForm.businessLlicense &&
					toubaoForm.contactPhone &&
					!this.toubaoForm.code
				"
				>发送验证码</el-button
			>
			<el-button size="small" type="primary" v-else @click="saveToubao">
				确认
			</el-button>
		</div>
	</el-form>
</template>

<script>
export default {
	data() {
		return {}
	},
	computed: {},
	mounted() {},
	methods: {},
	components: {}
}
</script>

<style lang="scss" scoped="scoped"></style>
